<template>
  <view class="tangkou-container">
    <view class="tk-items">
      <view v-for="(item, i) in list" :key="i" class="tk-item" @click="onView(item)">
        <image src="../../static/assets/tk/tkbg.png" class="tk-item-bg" mode="widthFix"></image>
        <view class="tk-item-main">
          <view class="tk-item-left">
            <view class="tkil tkil1">堂主</view>
            <view class="tkil tkil2">{{ item.userName }}</view>
          </view>
          <view class="tk-item-info">
            <view class="tkii-x">{{ item.surname }}</view>
            <view class="tkii-area">{{ item.provinceName }}</view>
            <view class="tkii-num">{{ item.peopleCount }}人</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
      }
    },
    onLoad() {
      this.getList()
    },
    methods: {
      getList() {
        this.$http({
          url: '/agent/getAgentList'
        }).then(res => {
          this.list = res.data.userAgentList
        })
      },
      onView(item) {
        uni.navigateTo({
          url: `./detail?provinceId=${item.provinceId}&surnameId=${item.surnameId}&provinceName=${item.provinceName}&userName=${item.userName}`
        })
      },
    }
  }
</script>

<style lang="less">
.tangkou-container{
  background-color: #FDF8F0;
  min-height: 100vh;
  .tk-items{
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    padding: 40rpx 0;
    .tk-item{
      width: 33.33%;
      position: relative;
      margin-bottom: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .tk-item-main{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      color: #614700;
      .tk-item-left{
        position: absolute;
        top: 80rpx;
        left: 20rpx;
        font-size: 28rpx;
        .tkil{
          writing-mode: tb-rl;
          &.tkil1{
            margin-bottom: 16rpx;
          }
        }
      }
      .tk-item-info{
        display: block;
        padding-top: 86rpx;
        width: 100%;
        height: 100%;
        text-align: center;
        color: #d4b106;
        .tkii-x{
          font-size: 36rpx;
          height: 40rpx;
          line-height: 40rpx;
          margin-bottom: 10rpx;
          font-weight: bold;
          color: #f0f0f0;
        }
        .tkii-area{
          font-size: 24rpx;
          margin-bottom: 5rpx;
        }
        .tkii-num{
          font-size: 24rpx;
        }
      }
    }
    .tk-item-bg{
      position: relative;
      z-index: 1;
      width: 160rpx;
    }
  }
  
}
</style>
